<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>add Emp</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css"
			href="css/style.css" />
	</head>

	<body>
		<div id="wrap">
			<div id="top_content">
					<div id="header">
						<div id="rightheader">
							<p>
								2020/8/12
								<br />
								<a href="javascript:;" @click="logout">安全退出</a>
							</p>
						</div>
						<div id="topheader">
							<h1 id="title">
								<a href="./emplist.html">员工信息管理系统</a>
							</h1>
						</div>
						<div id="navigation">
						</div>
					</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						添加员工信息:
					</h1>
					<form action="emplist.html" method="post">
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">
									姓名:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" v-model="emp.name" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									照片:
								</td>
								<td valign="middle" align="left">
									<input type="file" ref="myPhoto" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									工资:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" v-model="emp.salary" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									年龄:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" v-model="emp.age" />
								</td>
							</tr>
						</table>
						<p>
							<input type="button" @click="addEmp" class="button" value="确认" />
						</p>
					</form>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					com.lwj@qq.com
				</div>
			</div>
		</div>
	</body>
</html>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.js"></script>
<script>
	var app = new Vue({
		el:"#wrap",
		data:{
			//用户
			user:{},
			//员工 
			emp:{},
		},
		methods:{
			//安全退出
			logout(){
				localStorage.removeItem("user");
				//刷新页面
				location.reload(true);  
			},
			addEmp(){
				// console.log(this.emp);
				// console.log(this.$refs.myPhoto.files[0]);
				//文件上传时，请求方式必须为post，enctype必须为multipart/form-data
				var formData = new FormData();
				formData.append("name",this.emp.name);
				formData.append("salary",this.emp.salary);
				formData.append("age",this.emp.age);
				formData.append("photo",this.$refs.myPhoto.files[0]);
				var _this = this;
				axios({
					method: "post",
					url:"http://127.0.0.1:9000/ems_vue/emp/addEmp",
					data: formData,
					headers:{
						'content-type':'multipart/form-data'
					}
				}).then(res=>{
					// console.log(res.data);
					if(res.data.state){
						if(window.confirm(res.data.msg+" 点击确定后跳转回员工页面！")){
							location.href="./emplist.html";
						}else{
							_this.emp = {};
						}
					}else{
						alert(res.data.msg);
					}
				})
			},
		},
		created(){
			var userJsonString = localStorage.getItem("user");
			//先判断从浏览器localStorage里面取到的用户信息是否为空
			if(userJsonString){
				//不为空就正常操作
				this.user = JSON.parse(userJsonString);
			}else{
				//如果为空 跳转回登陆界面
				alert("尚未登录！点击确定后返回登陆界面");
				location.href="./login.html";
			}
		},
	});
</script>
